<template>


	<view>
		<view class="cardContain" :style="{'--bgColor':bgColor,'--imgSize':rpxToPx(imgSize)}">

			<!-- 这里需要根据type 来判断一下到底是活动类型还是 预览那个页面 -->

			<!-- 	<block v-for="(i, j) in list" :key="i.text" v-if="i.type">
				<view class="v-order flex-column" @click=navGo(i)>
					<image :src="i.img"></image>
					<text class="flex" v-if="Number(i.num) > 0">{{ i.num }}</text>
					<view style="font-size: 24rpx;">{{ i.text }}</view>
				</view>
			</block> -->
			<block v-for="(i, j) in list" :key="i.text">
				<view class="v-order flex-column" @click=getList(i)>
					<image :src="i.img"></image>

					<view style="font-size: 24rpx;">{{ i.text }}</view>
				</view>
			</block>
		</view>
		<sunui-popup ref="pop">
			<template v-slot:content>
				<view class="qrcode-flex">
					<image class="qrcode" :src="qrcode"></image>
					<view class="tips">请长按二维码保存到手机</view>
				</view>
			</template>
		</sunui-popup>
	</view>
</template>

<script>
	export default {
		name: 'card',
		// props: ['list', 'title'],
		props: {
			list: {
				type: Array,
				default: () => []
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			imgSize: {
				type: Number,
				default: 100
			},
			time:{
				type:String,
				
			}




		},
		data() {
			return {
				// 详情info
				activityInfo: {},
				qrcode: ''
			};

		},
		computed: {
			// 主要目的就是为了适配rpx
			rpxToPx() {
				// 假设设计稿宽度是750px
				const designWidth = 750;
				// 获取当前屏幕宽度（uni.getSystemInfoSync()是uni-app提供的API）
				const screenWidth = uni.getSystemInfoSync().windowWidth;
				// 计算转换比例
				const ratio = screenWidth / designWidth;
				// 返回转换函数
				return function(rpx) {
					return rpx * ratio + 'px';
				};
			}
		},
		methods: {

       

			getList(i) {
				console.log(i)

				// 如果type有值直接跳转到活动列表
				if (i.activityList) {
					
				
					uni.navigateTo({
						url: '/pages/index/list?type=' + i.type + '&time=' + this.time + '&detail=' + true
					})
				}

				// 如果没有type 那么我们叫跳到详情页面
				if (i.activityDetail) {
					// 1 显示 活动预览  2 显示中奖名单 3显示 用户数据
					switch (i.id) {
						case i.id: {
							//活动预览
							if (i.id == 0 && i.text == '活动预览') {
								console.log(i.type)

								if (i.type == 1 || i.type == 5) {
									uni.navigateTo({
										// id 活动id
										url: '/pages/index/previewPush?id=' + i.activityId+'&preview='+i.type 
									})
								} else if (i.type == 2) {
									// 大转盘
							
									uni.navigateTo({
										url: "/pages/index/previewTurntable?id=" + i.activityId,
									})
								} else if (i.type == 3) {
									// 九宫格
									uni.navigateTo({
										url: "/pages/index/previewSquared?id=" + i.activityId,
									})
								} else {
									// 卡券活动
									uni.navigateTo({
										url: "/pages/index/previewCoupon?id=" + i.activityId,
									})
								}
							}
						}
						case i.id: {
							// 中奖记录 需要传 活动 id  
							if (i.id == 1 && i.text == '中奖名单') {

								uni.navigateTo({
									url: '/pages/index/winning?id=' + i.activityId
								})

							}
						}
						case i.id: {
							// 用户数据 活动 id
							if (i.id == 2 && i.text == '用户数据') {
								uni.navigateTo({
									url: '/pages/index/userData'
								})
							}

						}

					}
				}
			},
		},

	};
</script>

<style lang="less">
	.cardContain {
		border-radius: 10rpx;
		padding: 26rpx 36rpx 26rpx 30rpx;
		display: flex;
		justify-content: space-around;
		text-align: center;
		align-items: center;
		background-color: var(--bgColor);
		height: 226rpx;
		width: 710rpx;

		image {

			margin-bottom: 34rpx;
			width: var(--imgSize);
			height: var(--imgSize);
		}

		.qrcode {
			width: 300rpx;
			height: 300rpx;
		}

	}

	.qrcode-flex {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;

		.tips {
			margin-top: 20rpx;
		}
	}
</style>